﻿<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Gantt chart demo</title>
	<style type="text/css">
		body{
			font-family: Verdana, Arial, Sans-serif;
			font-size:14px;
		}
		#gantt{
			width:1200px;
			height:550px;
			padding:1px;
		}
	</style>
	<!--link rel="stylesheet" type="text/css" href="gantt.css"/-->
	<script type="text/javascript" src="lib/html.js"></script>
	<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="lib/raphael-min.js"></script>
	<script type="text/javascript" src="gantt.js"></script>
	
	<div id="ganttData" style="display:none;">
		<p id="1"><span class="name">SOFTWARE SELECTION</span><span class="outlineNumber">0</span><span class="start">2008-01-07T08:00:00</span><span class="finish">2008-04-15T17:00:00</span></p>
		<p id="2"><span class="name">RFP</span><span class="outlineNumber">1</span><span class="start">2008-01-07T08:00:00</span><span class="finish">2008-02-19T17:00:00</span></p>
		<p id="3"><span class="name">REQUIREMENTS</span><span class="outlineNumber">1.1</span><span class="start">2008-01-07T08:00:00</span><span class="finish">2008-01-29T17:00:00</span></p>
		<p id="4"><span class="name">Develop "Technical Requirements"</span><span class="outlineNumber">1.1.1</span><span class="start">2008-01-07T08:00:00</span><span class="finish">2008-01-08T17:00:00</span><span class="progress">0</span></p>
		<p id="5"><span class="name">Develop Functional Requirements</span><span class="outlineNumber">1.1.2</span><span class="start">2008-01-09T08:00:00</span><span class="finish">2008-01-29T17:00:00</span><span class="progress">0</span><span class="predecessor">4</span></p>
		<p id="6"><span class="name">MARKET RESEARCH</span><span class="outlineNumber">1.2</span><span class="start">2008-01-09T08:00:00</span><span class="finish">2008-02-19T17:00:00</span></p>
		<p id="7"><span class="name">Analyze Market</span><span class="outlineNumber">1.2.1</span><span class="start">2008-01-09T08:00:00</span><span class="finish">2008-01-29T17:00:00</span><span class="progress">0</span></p>
		<p id="8"><span class="name">Negotiate with Vendors</span><span class="outlineNumber">1.2.2</span><span class="start">2008-01-30T08:00:00</span><span class="finish">2008-02-19T17:00:00</span><span class="progress">0</span><span class="predecessor">7</span></p>
		<p id="9"><span class="name">Obtain Proposals</span><span class="outlineNumber">1.2.3</span><span class="start">2008-02-19T17:00:00</span><span class="finish">2008-02-19T17:00:00</span><span class="progress">0</span><span class="predecessor">5</span></p>
		<p id="10"><span class="name">SELECTION</span><span class="outlineNumber">2</span><span class="start">2008-02-20T08:00:00</span><span class="finish">2008-04-15T17:00:00</span></p>
		<p id="11"><span class="name">PROPOSAL ANALYSIS</span><span class="outlineNumber">2.1</span><span class="start">2008-02-20T08:00:00</span><span class="finish">2008-04-01T17:00:00</span></p>
		<p id="12"><span class="name">Analyze Demo Versions</span><span class="outlineNumber">2.1.1</span><span class="start">2008-02-20T08:00:00</span><span class="finish">2008-03-18T17:00:00</span><span class="progress">0</span><span class="predecessor">9</span></p>
		<p id="13"><span class="name">Analyze Specifications Analysis</span><span class="outlineNumber">2.1.2</span><span class="start">2008-03-19T08:00:00</span><span class="finish">2008-04-01T17:00:00</span><span class="progress">0</span><span class="predecessor">9</span></p>
		<p id="14"><span class="name">INFORMATION CHECK UP</span><span class="outlineNumber">2.2</span><span class="start">2008-03-19T08:00:00</span><span class="finish">2008-04-15T17:00:00</span></p>
		<p id="15"><span class="name">Check References</span><span class="outlineNumber">2.2.1</span><span class="start">2008-03-19T08:00:00</span><span class="finish">2008-04-15T17:00:00</span><span class="progress">0</span><span class="predecessor">12</span></p>
		<p id="16"><span class="name">Check Support</span><span class="outlineNumber">2.2.2</span><span class="start">2008-04-02T08:00:00</span><span class="finish">2008-04-15T17:00:00</span><span class="progress">0</span><span class="predecessor">13</span></p>
		<p id="17"><span class="name">Selection</span><span class="outlineNumber">2.2.3</span><span class="start">2008-04-15T17:00:00</span><span class="finish">2009-08-15T17:00:00</span><span class="progress">0</span><span class="predecessor">15</span></p>
	</div>
		
	<script type="text/javascript">
		function addMoreTasks(){
			var div = $("#ganttData");
			for(var i=0; i<100; i++){
				var id = 100+i+"";
				div.append(Html.p({id:id},
					Html.span({"class":"name"}, "Task#"+id),
					Html.span({"class":"outlineNumber"}, id),
					Html.span({"class":"start"}, "2008-04-11T17:00:00"),
					Html.span({"class":"finish"}, "2008-04-15T17:00:00")
				));
			}
		}
		
		$(function(){
			addMoreTasks();
			$("#gantt").gantt({
				dataType:"MSPrjTable",
				autoSize: true
			}, $("#ganttData"));
		});
	</script>
</head>
<body>
	<h1>Gantt chart demo</h1>
	<p><a href="anyGantt.png">Design</a></p>
	<div id="gantt"></div>
	<p>Next paragraph sample.</p>
</body>
</html>